<template>
  <div class="content">
    <h1 class="title"><i class="fas fa-concierge-bell"></i> 服务管理</h1>
    <div class="input-group">
      <input v-model="currentService.name" placeholder="服务名称" class="input-field" :disabled="!isAuthenticated">
      <input v-model="currentService.price" placeholder="价格" class="input-field" :disabled="!isAuthenticated">
      <textarea v-model="currentService.description" placeholder="服务描述" class="textarea-field" :disabled="!isAuthenticated"></textarea>
      <button @click="isEditing ? updateService() : addService()" class="action-button" :disabled="!isAuthenticated">
        {{ isEditing ? '更新' : '添加' }}
      </button>
      <button v-if="isEditing" @click="cancelEdit" class="cancel-button" :disabled="!isAuthenticated">取消</button>
    </div>
    <div class="add-service-to-booking">
      <h2>为预订房间添加服务</h2>
      <select v-model="selectedBooking" class="select-field" :disabled="!isAuthenticated">
        <option value="">请选择预订</option>
        <option v-for="booking in bookings" :value="booking" :key="booking.id">
          {{ booking.roomNumber }} - {{ booking.guestName }}
        </option>
      </select>
      <select v-model="selectedService" class="select-field" :disabled="!isAuthenticated">
        <option value="">请选择服务</option>
        <option v-for="service in services" :value="service" :key="service.name">
          {{ service.name }} - ¥{{ service.price }}
        </option>
      </select>
      <button @click="addServiceToBooking" class="action-button" :disabled="!isAuthenticated">添加服务</button>
    </div>
    <table class="data-table">
      <thead>
        <tr>
          <th>服务名称</th>
          <th>价格</th>
          <th>描述</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(service, index) in services" :key="index">
          <td>{{ service.name }}</td>
          <td>{{ service.price }}</td>
          <td>{{ service.description }}</td>
          <td>
            <button @click="editService(index)" class="edit-button" :disabled="!isAuthenticated">编辑</button>
            <button @click="deleteService(index)" class="delete-button" :disabled="!isAuthenticated">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <h2 class="sub-title">服务预订列表</h2>
    <table class="data-table">
      <thead>
        <tr>
          <th>房间号</th>
          <th>客人姓名</th>
          <th>服务名称</th>
          <th>服务价格</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(serviceBooking, index) in serviceBookings" :key="index">
          <td>{{ serviceBooking.booking.roomNumber }}</td>
          <td>{{ serviceBooking.booking.guestName }}</td>
          <td>{{ serviceBooking.service.name }}</td>
          <td>{{ serviceBooking.service.price }}</td>
          <td>
            <button @click="deleteServiceBooking(index)" class="delete-button" :disabled="!isAuthenticated">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'ServiceManagement',
  data() {
    return {
      services: [
        { name: '早餐', price: '50', description: '自助早餐' },
        { name: 'SPA', price: '200', description: '60分钟精油按摩' },
        { name: '健身房使用', price: '30', description: '2小时健身房使用权' },
        { name: '机场接送', price: '150', description: '单程机场接送服务' },
        { name: '洗衣服务', price: '20', description: '清洗一件衣物' }
      ],
      currentService: {
        name: '',
        price: '',
        description: ''
      },
      isEditing: false,
      editingIndex: -1,
      selectedBooking: null,
      selectedService: null
    }
  },
  computed: {
    bookings() {
      return this.$store.state.bookings
    },
    serviceBookings() {
      return this.$store.getters.serviceBookings
    },
    isAuthenticated() {
      return localStorage.getItem('isAuthenticated') === 'true';
    }
  },
  methods: {
    addService() {
      this.services.push({...this.currentService});
      this.resetForm();
    },
    editService(index) {
      this.currentService = {...this.services[index]};
      this.isEditing = true;
      this.editingIndex = index;
    },
    updateService() {
      this.services[this.editingIndex] = {...this.currentService};
      this.resetForm();
    },
    deleteService(index) {
      this.services.splice(index, 1);
      if (index === this.editingIndex) {
        this.resetForm();
      }
    },
    cancelEdit() {
      this.resetForm();
    },
    resetForm() {
      this.currentService = { name: '', price: '', description: '' };
      this.isEditing = false;
      this.editingIndex = -1;
    },
    addServiceToBooking() {
      if (this.selectedBooking && this.selectedService) {
        this.$store.dispatch('addServiceToBooking', {
          booking: this.selectedBooking,
          service: this.selectedService
        });
        this.selectedBooking = null;
        this.selectedService = null;
        alert('服务已添加到预订！');
      } else {
        alert('请选择预订和服务！');
      }
    },
    deleteServiceBooking(index) {
      if (confirm('确定要删除此服务预订吗？')) {
        this.$store.dispatch('deleteServiceBooking', index);
        alert('服务预订已删除');
      }
    }
  }
}
</script>

<style scoped>
.content {
  margin-left: 240px;
  padding: 40px;
  background-color: #f4f6f9;
}

.title {
  font-size: 32px;
  color: #333;
  margin-bottom: 20px;
}

.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.input-field {
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 15px;
  font-size: 16px;
  width: 200px;
}

.textarea-field {
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 15px;
  font-size: 16px;
  width: 300px;
  height: 80px;
}

.action-button {
  padding: 12px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.action-button:hover {
  background-color: #0056b3;
}

.cancel-button {
  padding: 12px 20px;
  background-color: #f8f9fa;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.cancel-button:hover {
  background-color: #e2e6ea;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.data-table th,
.data-table td {
  padding: 15px;
  border-bottom: 1px solid #ddd;
  text-align: left;
}

.data-table th {
  background-color: #f2f2f2;
  font-weight: 600;
}

.edit-button {
  padding: 8px 15px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.edit-button:hover {
  background-color: #218838;
}

.delete-button {
  padding: 8px 15px;
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.delete-button:hover {
  background-color: #c82333;
}

.add-service-to-booking {
  margin-bottom: 20px;
}

.select-field {
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 15px;
  font-size: 16px;
}
</style>